 <template>
    <div class="hot-nav">
       <div class="hot-nav-content">
         <div class="nav-content-inner">
           <a class="inner-item">
              <img src="./home/nav_icon01.png" alt="">
              <span>限时秒杀</span>
           </a>
              <a class="inner-item">
              <img src="./home/nav_icon02.png" alt="">
              <span>限时秒杀</span>
           </a>
            <a class="inner-item">
              <img src="./home/nav_icon01.png" alt="">
              <span>限时秒杀</span>
           </a>
              <a class="inner-item">
              <img src="./home/nav_icon02.png" alt="">
              <span>限时秒杀</span>
           </a>
            <a class="inner-item">
              <img src="./home/nav_icon01.png" alt="">
              <span>限时秒杀</span>
           </a>
              <a class="inner-item">
              <img src="./home/nav_icon02.png" alt="">
              <span>限时秒杀</span>
           </a>
            <a class="inner-item">
              <img src="./home/nav_icon01.png" alt="">
              <span>限时秒杀</span>
           </a>
              <a class="inner-item">
              <img src="./home/nav_icon02.png" alt="">
              <span>限时秒杀</span>
           </a>
            <a class="inner-item">
              <img src="./home/nav_icon01.png" alt="">
              <span>限时秒杀</span>
           </a>
              <a class="inner-item">
              <img src="./home/nav_icon02.png" alt="">
              <span>限时秒杀</span>
           </a>
         </div>
       </div>
       <div class="hot-nav-bottom">
         <div class="hot-navbottom-inner" :style="innerBarStyle"></div>
       </div>
    </div>
</template>

<script>
  export default {
    name: "HotNav",
    data () {
      return {
        // 1 屏幕的宽带
        screenW: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
        // 2 总宽带
        scrollContentW: 720 ,
        //3 滚动条背景长度
        bgBarW: 100,
        //滚动条长度
        barXWidth: 0
     }
    },
    mounted() {
      this.getBottomBarWidth()
    },
    computed: {
      innerBarStyle() {
        return {
          width: `${this.barXWidth}px`
        }
      }
    },
    methods: {
      getBottomBarWidth () {
        this.barXWidth = this.bgBarW * (this.screenW / this.scrollContentW)
      }
    }
  }
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
 .hot-nav
   width 100%
   height 180px
   position relative
   background #fff
   padding-bottom 10px
   .hot-nav-content
     width 100%
     overflow auto
     .nav-content-inner
       width 720px
       height 180px
       display flex
       flex-wrap wrap
       .inner-item
          width 90px
          height 90px
          display flex
          flex-direction column
          justify-content center
          align-items center
          font-size 14px
          color #666
         img
             width 35%
             padding-bottom 10px
    .hot-nav-content::-webkit-scrollbar   
      display none 
    .hot-nav-bottom
      width 100px
      height 2px
      background-color #ccc
      position absolute
      left 50%
      margin-left -50px
      bottom 8px
      .hot-navbottom-inner
        position absolute
        left 0
        height 100%
        background-color orangered     
</style>
